<template>
	<div class="container">
		<div class="header">我的</div>
		<div class="user margin" @click="toPage('/pages/setting/information/index')">
			<image v-if="userInfo.avatar" class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
			<image v-else class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
			<div class="details">
				<template v-if="isLogin">
					<div class="name">{{ userInfo.loginName }}</div>
					<div class="tags">
						{{ userInfo.projectName || "暂无项目信息" }}
					</div>
				</template>
				<template v-else>
					<div class="name">登录 / 注册 ></div>
				</template>
			</div>

			<image class="setting" src="/static/setting-icon.png" mode="widthFix" @click.stop="toPage('/pages/setting/index/index')"></image>
		</div>
		<div class="card margin">
			<div class="item arrow-right" @click="toPage('/pages/setting/index/index')">
				<image class="image" mode="aspectFill" src="/static/mine/setting.png"></image>
				设置
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {}
	},
	onShow() {},
	computed: {
		isLogin() {
			return this.$store.getters["user/isLogin"]
		},
		userInfo() {
			return this.$store.state.user.userInfo
		},
	},
	methods: {
		toPage(url) {
			uni.navigateTo({
				url,
			})
		},
	},
}
</script>

<style lang="scss" scoped>
page {
	background: #f6f6f6;
}
.header {
	text-align: center;
	color: #fff;
	font-size: 30rpx;
	line-height: 40px;
}
.card {
	background: #fff;
	border-radius: 25rpx;
}
.margin {
	margin-inline: 30rpx;
}
.container {
	background: url("/static/mine-bg.png") no-repeat top center / contain;
	min-height: 100vh;
}
.user {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 45rpx;
	position: relative;
	margin-top: 50rpx;
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		flex: none;
		margin-right: 20rpx;
	}
	.name {
		color: #fff;
		font-size: 32rpx;
	}
	.tags {
		padding-top: 15rpx;
		font-size: 24rpx;
		color: #fff;
		.image {
			width: 130rpx;
			height: 30rpx;
		}
	}
	.setting {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
	}
}
.card {
	padding: 0 35rpx;
	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid #eee;
		height: 130rpx;
		font-size: 28rpx;
		&:last-child {
			border-bottom: none;
		}
		&::after {
			width: 25rpx;
			height: 25rpx;
			color: #aeaeae;
		}
		.image {
			padding: 5rpx;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		.im2 {
			padding: 5rpx;
			width: 50rpx;
			height: 57rpx;
			margin-right: 20rpx;
		}
		.im3 {
			padding: 5rpx;
			width: 58rpx;
			height: 45rpx;
			margin-right: 20rpx;
		}
	}
}
</style>
